<template>
  <div>
    <Row :gutter="16">
      <Col span="6">
        <div class="basic">
          <div>
            <span class="dt">基本信息</span>
            <span class="dd"
              >{{ row.name }} {{ row.age }} 岁 {{ row.gender }}</span
            >
            <Tag
              class=" ivu-ml-16"
              v-if="+row.in_hospital_status === 1"
              color="primary"
              >{{ `${+row.in_hospital_status === 1 ? "住院" : ""}` }}</Tag
            >
          </div>
          <div>
            <span class="dt">诊室</span>
            <span class="dd">{{ row.clinic_name }}</span>
          </div>
          <div>
            <span class="dt">诊疗号</span>
            <span class="dd">{{ row.patient_card_id }}</span>
          </div>
        </div>
        <div class="card">
          <div class="card_body" v-for="item in cardList" :key="item.id">
            <h4>剩余数</h4>
            <div class="cardlist">
              <div class="cardlistTitle">{{ item.all_name }}</div>
              <div>{{ item.drug_type_name }} {{ item.surplus_num }}次</div>
              <div class="cardlistaction">
                <a class="tive1" @click="modalAdd(item)" v-if="isAdd">新增</a>
                <Divider type="vertical" />
                <a
                  class="tive2"
                  @click="modaRend(item)"
                  :disabled="item.surplus_num == '0' ? true : false"
                  v-if="isrund"
                  >停止医嘱</a
                >
                <Divider type="vertical" />
                <a
                  class="tive3"
                  @click="modalDelete(item)"
                  :disabled="item.surplus_num !== '0' ? true : false"
                  v-if="isdelete"
                  >删除</a
                >
              </div>
            </div>
          </div>
        </div>
      </Col>
      <Col span="18">
        <Row type="flex" justify="start" :gutter="16" class="ivu-mt-8 ivu-mb-8">
          <Col>
            <DatePicker
              v-model="searchForm.date"
              format="yyyy-MM-dd"
              type="daterange"
              transfer
              :clearable="true"
              placement="bottom-end"
              placeholder="请选择治疗日期"
              @on-change="askDatasDate"
              style="width: 200px"
            ></DatePicker>
          </Col>
          <Col>
            <Select
              style="width:100px"
              placeholder="输液类型"
              clearable
              v-model="searchForm.drug_type"
              @on-change="changetype"
            >
              <Option
                v-for="item in typeList"
                :value="item.value"
                :key="item.value"
                >{{ item.label }}</Option
              >
            </Select>
          </Col>
          <Col>
            <Select
              style="width:200px"
              placeholder="请选择药品"
              v-model="searchForm.surplus_id"
              clearable
              @on-change="changeDrug"
            >
              <Option
                v-for="item in drugList"
                :value="item.id"
                :key="item.id"
                >{{ item.all_name }}</Option
              >
            </Select>
          </Col>
          <Col>
            <Select
              style="width:100px"
              placeholder="操作类型"
              clearable
              v-model="searchForm.type"
              @on-change="changeCause"
            >
              <Option
                v-for="item in clinicLists"
                :value="item.value"
                :key="item.value"
                >{{ item.title }}</Option
              >
            </Select>
          </Col>
          <Col>
            <Button type="success" @click="changepro" v-if="isShow"
              >配置项目</Button
            >
          </Col>
          <Col>
            <Button type="success" @click="changedisposal">开处置单</Button>
          </Col>
        </Row>
        <Table
          size="small"
          ref="table"
          :columns="columns"
          :data="data"
          :loading="loading"
        ></Table>
        <div class="ivu-mt ivu-text-center">
          <Page
            :total="total"
            :current.sync="page"
            show-total
            show-elevator
            :page-size="pageSize"
            @on-change="changePage"
            :page-size-opts="pageOpts"
            show-sizer
            transfer
            @on-page-size-change="changePageSize"
          />
        </div>
      </Col>
      <!-- 配置项目 -->
      <Modal
        v-model="modalstatus"
        title="配置项目"
        width="960"
        draggable
        @on-cancel="cancel(formDynamic)"
      >
        <Form ref="formDynamic" :model="config_list" :rules="createRules">
          <template v-for="(ops, index) in config_list.items">
            <Row
              v-if="ops.show"
              type="flex"
              justify="start"
              :gutter="16"
              class="ivu-mt-8 ivu-mb-8"
              :key="index"
            >
              <Col class="radio">
                <RadioGroup v-model="ops.drug_type">
                  <Radio :label="1">静滴</Radio>
                  <Radio :label="2">肌注</Radio>
                </RadioGroup>
              </Col>
              <Col v-if="ops.drug_type == 1">
                <FormItem
                  :prop="'items.' + index + '.water_type'"
                  :rules="{
                    required:
                      ops.drug_id == '' ||
                      (ops.drug_id == undefined && ops.drug_volume == null)
                        ? true
                        : false,
                    message: '请选择',
                    trigger: 'change',
                    type: 'number',
                  }"
                >
                  <Select
                    style="width:80px"
                    placeholder="请选择"
                    clearable
                    v-model="ops.water_type"
                    @on-change="changewater(ops)"
                  >
                    <Option
                      v-for="item in waterList"
                      :value="item.value"
                      :key="item.value"
                      >{{ item.label }}</Option
                    >
                  </Select>
                </FormItem>
              </Col>
              <Col v-if="ops.drug_type == 1">
                <FormItem
                  :prop="'items.' + index + '.water_volume'"
                  :rules="{
                    required:
                      ops.drug_id == '' ||
                      (ops.drug_id == undefined && ops.drug_volume == null)
                        ? true
                        : false,
                    message: '剂量',
                    trigger: 'blur',
                    type: 'number',
                  }"
                >
                  <InputNumber :min="1" v-model="ops.water_volume"></InputNumber
                  ><span style="margin-left:5px">ml</span>
                </FormItem>
              </Col>
              <Col v-if="ops.drug_type == 1">
                <FormItem
                  :prop="'items.' + index + '.drug_id'"
                  :rules="{
                    required:
                      ops.water_type == '' ||
                      (ops.water_type == undefined && ops.water_volume == null)
                        ? true
                        : false,
                    message: '请选择药品',
                    trigger: 'change',
                  }"
                >
                  <Select
                    style="width:160px"
                    placeholder="请选择药品"
                    v-model="ops.drug_id"
                    clearable
                    @on-change="acquisitionUnit(1, index, ops.drug_id)"
                    @on-clear="changeClear(ops)"
                  >
                    <Option
                      v-for="item in prodrugList"
                      :value="item.id"
                      :key="item.id"
                      >{{ item.drug_name }}</Option
                    >
                  </Select>
                </FormItem>
              </Col>
              <Col v-else>
                <FormItem
                  :prop="'items.' + index + '.drug_id'"
                  :rules="{
                    required: 'true',
                    message: '请选择药品',
                    trigger: 'change',
                  }"
                >
                  <Select
                    style="width:160px"
                    placeholder="请选择药品"
                    v-model="ops.drug_id"
                    clearable
                    @on-change="acquisitionUnit(2, index, ops.drug_id)"
                  >
                    <Option
                      v-for="item in prodrugList_jz"
                      :value="item.id"
                      :key="item.id"
                      >{{ item.drug_name }}</Option
                    >
                  </Select>
                </FormItem>
              </Col>
              <Col>
                <FormItem
                  :prop="'items.' + index + '.drug_volume'"
                  :rules="{
                    required:
                      ops.water_type == '' ||
                      (ops.water_type == undefined && ops.water_volume == null)
                        ? true
                        : false,
                    message: '剂量',
                    pattern: '^\d*(\.\d{0,2})?$',
                    trigger: 'blur',
                    type: 'number',
                  }"
                >
                  <!-- <InputNumber  :min="1" v-model="ops.drug_volume"></InputNumber> -->
                  <InputNumber
                    :min="0"
                    v-model="ops.drug_volume"
                    @on-blur="changebulr(ops, ops.drug_volume)"
                  ></InputNumber>
                  <span style="margin-left:5px">{{ ops.drug_unit }}</span>
                </FormItem>
              </Col>
              <Col>
                <FormItem
                  :prop="'items.' + index + '.operate_num'"
                  :rules="{
                    required: true,
                    message: '请填写本次新增次数',
                    trigger: 'blur',
                    type: 'number',
                  }"
                >
                  <span style="margin-right:5px">本次新增次数</span>
                  <InputNumber :min="1" v-model="ops.operate_num"></InputNumber
                  ><span style="margin-left:5px">次</span>
                </FormItem>
              </Col>
              <Col>
                <Button @click="handleRemove(index)">删除</Button>
              </Col>
            </Row>
          </template>
          <FormItem>
            <Button type="dashed" icon="md-add" @click="addpush()">新增</Button>
          </FormItem>
          <FormItem label="备注">
            <Input
              placeholder="请输入备注"
              v-width="500"
              v-model="config_list.remark"
            />
          </FormItem>
        </Form>
        <div slot="footer">
          <Button @click="cancel(formDynamic)">取消</Button>
          <Button type="primary" @click="sumbitSave(formDynamic)">确定</Button>
        </div>
      </Modal>
      <!-- 开处置单 -->
      <Modal
        v-model="modal"
        draggable
        title="开处置单"
        width="650"
        @on-ok="disposalSave"
        @on-cancel="oncancel()"
      >
        <Table
          max-height="500"
          border
          ref="selection"
          :columns="tableColumns"
          :data="tableData"
          @on-select-all="allSelect"
          @on-select-all-cancel="cancelAll"
          @on-selection-change="changeSelection"
        >
          <template slot="option" slot-scope="{ row }">
            <InputNumber
              :min="1"
              :max="+row.surplus_num"
              v-model="row.num"
              @on-change="changeIput(row)"
            ></InputNumber>
          </template>
        </Table>
        <Checkbox class="ivu-mt-8" v-model="single" @on-change="changesingle"
          >打印处置单</Checkbox
        >
      </Modal>
      <!-- 新增 /退费-->
      <Modal
        v-model="addstatus"
        width="360"
        :title="modalTitle"
        draggable
        @on-cancel="modalcancel(modalname)"
      >
        <Form ref="modalname" :model="modalForm" :rules="ruleInline" inline>
          <div>
            <FormItem prop="operate_num">
              <InputNumber
                :min="1"
                v-model="modalForm.operate_num"
              ></InputNumber>
              <span style="margin-left:8px;margin-top:10px"
                >剩余：{{ modalForm.num }}</span
              >
              <span v-if="modalTitle === '停止医嘱'" style="margin-left:16px"
                >可停：{{ modalForm.can_refund }}</span
              >
            </FormItem>
            <FormItem label="备注" v-if="modalTitle !== '停止医嘱'">
              <Input placeholder="请输入备注" v-model="modalForm.remark" />
            </FormItem>
          </div>
          <div style="margin-top:24px" v-if="modalTitle === '停止医嘱'">
            <FormItem prop="remark" label="备注" style="width:320px">
              <Input
                placeholder="请输入停止医嘱备注"
                v-model="modalForm.remark"
              />
            </FormItem>
          </div>
        </Form>
        <div slot="footer">
          <Button @click="modalcancel(modalname)">取消</Button>
          <Button
            type="primary"
            :loading="subloading"
            @click="modalSave(modalname)"
            >确定</Button
          >
        </div>
      </Modal>
      <!-- 打印处置单 -->
      <Modal
        v-model="printstatus"
        title="打印模板"
        @on-ok="printSave"
        @on-cancel="printCancel"
        draggable
        width="1000"
      >
        <div style="max-height:520px;overflow-y:auto">
          <div ref="container">
            <div class="single">
              <div
                v-for="(item, index) in selectionList"
                :key="index"
                :class="
                  index + 1 === selectionList.length
                    ? 'singleboxs'
                    : 'singlebox'
                "
              >
                <div style="display:flex;padding-top:40px">
                  <h2 style="margin-top:0px">注射处置单</h2>
                  <div class="infobox">
                    <span>日期:</span>
                    <span>
                      {{
                        `${$Date(new Date()).format("YYYY-MM-DD HH:mm:ss")}`
                      }}</span
                    >
                  </div>
                </div>
                <div class="druginfo">
                  <div class="infobox" style="padding-left:0">
                    <div>姓名:</div>
                    <div style="font-size:24px" class="dragname">
                      {{ row.name }}
                    </div>
                  </div>
                  <div class="infobox">
                    <div>性别:</div>
                    <div class="dragname" style="font-size:24px">
                      {{ row.gender }}
                    </div>
                  </div>
                  <div class="infobox">
                    <div>年龄:</div>
                    <div class="dragname" style="font-size:24px">
                      {{ row.age }}
                    </div>
                  </div>
                  <div class="infobox">
                    <div>诊室:</div>
                    <div class="dragname">{{ row.clinic_name }}</div>
                  </div>
                  <div class="infobox">
                    <div>诊疗号:</div>
                    <div class="dragname">{{ row.patient_card_id }}</div>
                  </div>
                </div>
                <div class="container">
                  <div class="contbox dragname">药名、剂量</div>
                  <div class="contbox dragname">用法</div>
                  <div class="contbox dragname">次数</div>
                  <div class="contbox dragname">医生签字</div>
                  <div class="contbox dragname">核对者</div>
                  <template v-for="(it, idx) in item">
                    <div class="contbox dragname" :key="idx">
                      {{ it.all_name }}
                      <!-- <div class="ml"><div>{{printdrug.drug_name}}</div><div>{{printdrug.drug_volume}}ml</div></div> -->
                    </div>
                    <div class="contbox dragname">{{ it.drug_type_name }}</div>
                    <div class="contbox dragname">{{ it.num }}</div>
                    <div class="contbox "></div>
                    <div class="contbox"></div>
                  </template>
                </div>
              </div>
            </div>
          </div>
        </div>
      </Modal>
    </Row>
  </div>
</template>

<script>
import dayjs from "dayjs";
import {
  drugSurplus,
  drugrecordList,
  deletedrugSurplus,
  treatmentdrugSurplus,
  patientSurplus,
  surplusSelect,
  cardDrug,
  getdrugList,
} from "@/api/infusion.js";
export default {
  props: {
    row: {
      type: "",
      default: false,
    },
    clinicLists: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      formDynamic: "formDynamic",
      modalname: "modalname",
      subloading: false,
      isShow: false,
      isAdd: false,
      isrund: false,
      isdelete: false,
      searchForm: {
        date: [],
        drug_type: "",
        surplus_id: "",
        type: "",
      },
      ruleInline: {
        operate_num: [
          {
            required: true,
            message: "请输入次数",
            trigger: "blur",
            type: "number",
          },
        ],
        remark: [{ required: true, message: "请输入备注", trigger: "blur" }],
      },
      createRules: {},
      typeList: [
        {
          value: 1,
          label: "静滴",
        },
        {
          value: 2,
          label: "肌注",
        },
      ],
      waterList: [
        {
          value: 1,
          label: "盐水",
        },
        {
          value: 2,
          label: "糖水",
        },
      ],
      drugList: [],
      prodrugList: [],
      prodrugList_jz: [],
      causeList: [
        {
          value: 1,
          label: "新增",
        },
        {
          value: 2,
          label: "治疗",
        },
        {
          value: 3,
          label: "停止医嘱",
        },
      ],
      patient_id: "", // 患者id
      data: [],
      loading: false,
      total: 0,
      page: 1,
      pageSize: 10,
      pageOpts: [10, 20, 30, 50],
      columns: [
        {
          title: "项目名称",
          key: "all_name",
          minWidth: 200,
        },
        {
          title: "输液",
          key: "drug_type_name",
          width: 80,
        },
        {
          title: "时间",
          key: "created_at",
          width: 180,
        },
        {
          title: "数量",
          key: "operate_num",
          width: 80,
        },
        {
          title: "类型",
          key: "type_name",
          width: 120,
        },

        {
          title: "备注",
          key: "remark",
          width: 100,
          tooltip: true,
        },
        {
          title: "操作人",
          key: "operate_name",
          width: 100,
        },
      ],
      modalstatus: false,
      config_list: {
        items: [
          {
            drug_type: 1,
            drug_volume: null,
            drug_id: "",
            water_type: "",
            water_volume: null,
            operate_num: 1,
            show: true,
            drug_unit: "",
            remark: "",
          },
        ],
        remark: "",
      },
      addstatus: false,
      modalTitle: "",
      cardList: [],
      modalForm: {
        operate_num: null,
        num: null,
        remark: "",
        can_refund: "",
      },
      // 开处置单
      tableColumns: [
        {
          type: "selection",
          width: 60,
          align: "center",
        },
        {
          title: "项目",
          key: "all_name",
        },
        {
          title: "输液类型",
          key: "drug_type_name",
        },
        {
          title: "次数",
          slot: "option",
        },
      ],
      modal: false,
      tableData: [],
      single: true,
      selectionList: [],
      printstatus: false,
    };
  },
  computed: {},
  mounted() {
    this.state = JSON.parse(localStorage.getItem("poweredit"));
    // console.log(this.state,'this.state')
    for (let item of this.state) {
      if (item.name === "输液大厅配置项目") {
        this.isShow = item.bool;
      } else if (item.name === "输液大厅新增") {
        this.isAdd = item.bool;
      } else if (item.name === "输液大厅退费") {
        this.isrund = item.bool;
      } else if (item.name === "输液大厅删除") {
        this.isdelete = item.bool;
      }
    }
  },
  methods: {
    changeClear(val) {
      // console.log(val, 'qq')
    },
    changewater(val) {
      // console.log(val)
      // console.log(val.water_type == '', 'qqq')
    },
    changebulr(ops, value) {
      //  console.log(value,'value',ops,'ops')
      // ops.drug_volume = value.toFixed(2) * 1 //四舍五入
      ops.drug_volume = Math.floor(value * 100) / 100;
    },
    // 获取单位
    acquisitionUnit(num, index, id) {
      let items = this.config_list.items[index];
      if (num === 1) {
        this.prodrugList.forEach((item) => {
          if (item.id === id) {
            items.drug_unit = item.drug_unit;
          }
        });
      } else {
        this.prodrugList_jz.forEach((item) => {
          if (item.id === id) {
            items.drug_unit = item.drug_unit;
          }
        });
      }
    },
    initial(row) {
      this.page = 1;
      this.pageSize = 10;
      this.patient_id = row.id;
      this.getdrugrecordList();
      this.getsurplusSelect();
      this.getcardDrug();
      this.getdrugList();
    },
    // 获取药品
    getsurplusSelect() {
      surplusSelect({ patient_id: this.patient_id }).then((res) => {
        this.drugList = res;
      });
    },
    getdrugList() {
      getdrugList({ patient_id: this.patient_id }).then((res) => {
        this.prodrugList = res.drug_list_jd;
        this.prodrugList_jz = res.drug_list_jz;
      });
    },
    changetype() {
      this.getdrugrecordList();
    },
    changeDrug() {
      this.getdrugrecordList();
    },
    changeCause() {
      this.getdrugrecordList();
    },
    askDatasDate() {
      this.getdrugrecordList();
    },
    changePage(page) {
      this.page = page;
      this.getdrugrecordList();
    },
    changePageSize(pagesize) {
      this.pageSize = pagesize;
      this.getdrugrecordList();
    },
    // 获取患者列表
    getdrugrecordList() {
      this.loading = true;
      const params = {
        start_time: this.searchForm.date[0]
          ? dayjs(this.searchForm.date[0]).format("YYYY-MM-DD")
          : "",
        end_time: this.searchForm.date[1]
          ? dayjs(this.searchForm.date[1]).format("YYYY-MM-DD")
          : "",
        drug_type: this.searchForm.drug_type,
        surplus_id: this.searchForm.surplus_id,
        type: this.searchForm.type,
        patient_user_id: this.patient_id,
        page: this.page,
        pageSize: this.pageSize,
      };
      drugrecordList(params)
        .then((res) => {
          this.data = res.list;
          this.total = res.total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },

    changepro() {
      this.modalstatus = true;
    },
    addpush() {
      this.config_list.items.push({
        drug_type: 1,
        drug_volume: null,
        drug_id: "",
        water_type: "",
        water_volume: null,
        operate_num: 1,
        show: true,
        drug_unit: "",
        remark: "",
      });
    },
    handleRemove(index) {
      // this.config_list.items.splice(index,1)
      this.config_list.items[index].show = false;
    },
    // 配置项目保存
    sumbitSave(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.config_list.items.forEach((item) => {
            item.remark = this.config_list.remark;
          });
          const params = {
            patient_user_id: this.patient_id,
            config_list: this.config_list.items.filter(
              (item) => item.show === true
            ),
          };
          drugSurplus(params).then((res) => {
            this.$Message.success("配置成功");
            this.cancel(name);
            this.getcardDrug();
            this.getdrugrecordList();
          });
        }
      });
    },
    cancel(name) {
      this.$refs[name].resetFields();
      this.modalstatus = false;
      this.config_list = {
        items: [
          {
            drug_type: 1,
            drug_volume: null,
            drug_id: "",
            water_type: "",
            water_volume: null,
            operate_num: 1,
            show: true,
            drug_unit: "",
            remark: "",
          },
        ],
      };
    },
    // 获取card
    getcardDrug() {
      cardDrug({ patient_id: this.patient_id }).then((res) => {
        this.cardList = res;
        this.tableData = res.map((el) => ({
          num: null,
          _disabled: true,
          ...el,
        }));
        this.tableData = this.tableData.filter(
          (item) => +item.surplus_num !== 0
        );
      });
    },
    // 新增退费
    modalAdd(row) {
      this.modalForm.num = row.surplus_num;
      this.$set(this.modalForm, "drug_surplus_id", row.id);
      this.addstatus = true;
      this.modalTitle = "新增";
    },
    modaRend(row) {
      this.modalForm.num = row.surplus_num;
      this.modalForm.can_refund = row.can_refund;
      this.$set(this.modalForm, "drug_surplus_id", row.id);
      this.addstatus = true;
      this.modalTitle = "停止医嘱";
    },
    modalSave(name) {
      const data = {
        patient_user_id: this.patient_id,
        operate_num: this.modalForm.operate_num,
        drug_surplus_id: this.modalForm.drug_surplus_id,
        remark: this.modalForm.remark,
      };
      if (this.modalTitle === "新增") {
        this.$refs[name].validate((valid) => {
          if (valid) {
            patientSurplus(data).then((res) => {
              this.$Message.success("新增成功");
              this.modalcancel(name);
              this.getcardDrug();
              this.getdrugrecordList();
            });
          }
        });
      } else {
        this.$refs[name].validate((valid) => {
          if (valid) {
            treatmentdrugSurplus(data).then((res) => {
              this.$Message.success("停止医嘱成功");
              this.modalcancel(name);
              this.getcardDrug();
              this.getdrugrecordList();
            });
          }
        });
      }
    },
    modalcancel(name) {
      this.$refs[name].resetFields();
      this.addstatus = false;
      this.modalForm = {
        operate_num: null,
        num: null,
        remark: "",
      };
    },
    modalDelete(row) {
      const param = {
        drug_surplus_id: row.id,
        patient_user_id: this.patient_id,
      };
      this.$Modal.confirm({
        title: "删除提示",
        content: "是否确认删认此项目!",
        onOk: () => {
          this.deleteSubmit(param);
        },
      });
    },
    deleteSubmit(params) {
      deletedrugSurplus(params).then(() => {
        this.$Message.success(" 删除成功");
        this.getcardDrug();
        this.getdrugrecordList();
      });
    },
    // 开处置单
    changesingle(e) {
      this.single = e;
    },
    changeIput(e) {
      if (e.num > +e.surplus_num) {
        this.$Message.warning("次数不可大于当前项目的剩余数");
      }
      if (e.num > 0) {
        this.tableData.forEach((el) => {
          if (e.id === el.id) {
            el._disabled = false;
            el.num = e.num;
          }
        });
      }
      // console.log(e, 'e')
    },
    allSelect(section) {
      // console.log(section,'s')
      this.selection = section;
    },
    cancelAll(section) {
      this.selection = section;
    },
    changeSelection(section) {
      this.selection = section;
      console.log(this.selection, "selection");
    },
    changedisposal() {
      this.tableData = [];
      this.modal = true;
      this.getcardDrug();
      this.selection = [];
      this.single = true;
    },
    disposalSave() {
      if (this.selection.length === 0 || !this.single) {
        this.printstatus = false;
      } else {
        this.selectionList = [];
        if (this.selection.length > 4) {
          let n = 4;
          for (var i = 0; i < this.selection.length; i += n) {
            this.selectionList.push(this.selection.slice(i, i + n));
          }
        } else {
          this.selectionList = [this.selection];
        }
        console.log(this.selectionList);
        this.printstatus = true;
      }
    },
    oncancel() {
      this.modal = false;
      this.tableData = [];
    },
    // 打印处置单
    printSave() {
      this.$Print(this.$refs.container);
      this.selection = [];
    },
    printCancel() {
      this.tableData = [];
      this.selection = [];
    },
  },
};
</script>

<style lang="less" scoped>
.basic {
  line-height: 32px;
  width: 100%;
  height: 125px;
  padding: 16px;
  border: 1px solid #dcdee2;
  margin-bottom: 12px;
}
.dt {
  width: 30%;
  float: left;
  color: #777;
}
.dd {
  font-weight: bolder;
}
.card {
  border: 1px solid #dcdee2;
  border-color: #e8eaec;
  max-height: 600px;
  overflow-y: scroll;
}
.card_body {
  padding: 16px;
}
.cardlist {
  padding: 12px 0;
  border-bottom: 1px solid #e8eaec;
}
.cardlistTitle {
  margin-bottom: 12px;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
}
.cardlistaction {
  margin-top: 16px;
}
.tive1 {
  padding-right: 8px;
}
.tive2 {
  padding: 0 8px;
}
.tive3 {
  padding-left: 8px;
  color: red;
}
a[disabled] {
  color: #ccc !important;
}
.radio {
  line-height: 25px;
}
// 打印
.single {
  color: #000;
  //   width: 830px;
  //   height:520px;
  // border: 2px solid #000;
  padding: 24px 0 24px 24px;
  font-size: 18px;
  position: relative;
  font-family: "Microsoft YaHei";
}
.container {
  display: grid;
  grid-template-columns: 350px 90px 60px 120px 120px;
  grid-template-rows: 35px 50px 50px 50px 50px;
  // border: 1px solid #000;
  vertical-align: middle;
  text-align: center;
}
.druginfo {
  margin-bottom: 20px;
  font-family: "Microsoft YaHei";
  display: flex;
  justify-content: flex-start;
}
.contbox {
  border: 1px solid black;
  margin-left: -1px;
  margin-top: -1px;
  padding: 6px 0;
  word-wrap: break-word;
  display: flex;
  justify-content: center;
  align-items: center;
}
.drugline {
  text-align: left;
  padding: 0 10px;
}
.ml {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.singleboxs {
  max-height: 520px;
  margin: 10px;
}
.singlebox {
  height: 520px;
  margin: 10px;
}
.infobox {
  display: flex;
  align-items: center;
  padding: 9px 20px;
}
</style>
